<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<html>
<head>
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            min-height: 100vh;
        }
        .sidebar {
            height: 100vh;
            background-color: #263238;
            width: 250px;
            position: fixed; /* Added */
            left: 0; /* Added */
            top: 0; /* Added */
        }
        .sidebar .nav-link {
            color: #fff;
            padding: 0.8rem 1.5rem;
        }
        .sidebar .nav-link i {
            margin-right: 10px;
            font-size: 1.1rem;
        }
        .sidebar .nav-link:hover {
            background-color: #37474F;
        }
        .main-content {
            background-color: #f8f9fa;
            min-height: 100vh; /* Added */
            margin-left: 250px; /* Added to offset fixed sidebar */
        }
        .card { /* Added general card style */
            background-color: #ffffff;
            border-radius: 0.25rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            margin-bottom: 1.5rem;
        }
        .profile-card { /* Kept original, will override .card properties if applied to the same element */
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            /* margin-bottom from .card will apply if not specified here and element has both classes */
        }
        .profile-header { /* Kept original */
            background-color: #4e73df;
            color: white;
            border-radius: 10px 10px 0 0;
            padding: 20px;
        }
        .profile-avatar { /* Kept original */
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 5px solid white;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- 侧边栏 -->
        <div class="col-auto px-0 sidebar">
            <div class="d-flex flex-column">
                <div class="p-3">
                    <h4 class="text-white">管理系统</h4>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link" href="${pageContext.request.contextPath}/MainPage/managePage/Management.jsp">
                            <i class="bi bi-house-door"></i> 首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#systemSettingsSubmenu">
                            <i class="bi bi-gear"></i> 系统设置
                            <i class="bi bi-chevron-down float-end"></i>
                        </a>
                        <div class="collapse" id="systemSettingsSubmenu">
                            <ul class="nav flex-column ms-4">
                                <li class="nav-item">
                                    <a class="nav-link text-white" href="${pageContext.request.contextPath}/MainPage/managePage/UserManagement.jsp">
                                        <i class="bi bi-people"></i> 用户管理
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-white" href="${pageContext.request.contextPath}/MainPage/managePage/PermissionManagement.jsp">
                                        <i class="bi bi-shield-lock"></i> 角色管理
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-white" href="${pageContext.request.contextPath}/MainPage/managePage/RoleAssignment.jsp">
                                        <i class="bi bi-person-check"></i> 角色分配
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="col main-content">
            <!-- 顶部导航栏 -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
                <div class="container-fluid">
                    <button class="btn btn-link">
                        <i class="bi bi-list"></i>
                    </button>
                    <div class="ms-auto d-flex align-items-center">
                        <div class="dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                                <i class="bi bi-person-circle"></i> ${user.username}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item active" href="#"><i class="bi bi-person"></i> 个人信息</a></li>
                                <!-- 删除修改密码入口 -->
                                <!-- <li><a class="dropdown-item" href="#"><i class="bi bi-gear"></i> 修改密码</a></li> -->
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="${pageContext.request.contextPath}/API/user/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>

            <!-- 添加面包屑导航 -->
            <nav aria-label="breadcrumb" class="bg-light p-3">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="${pageContext.request.contextPath}/MainPage/managePage/Management.jsp">首页</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">个人中心</li>
                </ol>
            </nav>

            <!-- 个人中心内容 -->
            <div class="container py-5">
                <div class="row">
                    <div class="col-lg-4">
                        <!-- 个人信息卡片 -->
                        <div class="card profile-card mb-4">
                            <div class="profile-header text-center">
                                <img src="${pageContext.request.contextPath}/logs/lamb.jpg" alt="用户头像" class="profile-avatar">
                                <h4>${user.username}</h4>
                                <p class="mb-0">
                                    <span class="badge bg-light text-dark">
                                        <% 
                                        // 从session中获取角色列表
                                        List<Integer> roles = (List<Integer>)session.getAttribute("role");
                                        String roleText = "";
                                        
                                        if(roles != null && !roles.isEmpty()) {
                                            if(roles.contains(3)) {
                                                roleText = "管理员";
                                            } else if(roles.contains(2)) {
                                                roleText = "作家";
                                            } else if(roles.contains(1)) {
                                                roleText = "读者";
                                            } else {
                                                roleText = "未知角色";
                                            }
                                        } else {
                                            roleText = "未分配角色";
                                        }
                                        %>
                                        <%= roleText %>
                                    </span>
                                </p>
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-3">
                                    <i class="bi bi-envelope-fill text-primary me-2"></i>
                                    <span>${user.email != null ? user.email : '未设置邮箱'}</span>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <i class="bi bi-telephone-fill text-primary me-2"></i>
                                    <span>${user.phone != null ? user.phone : '未设置电话'}</span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-shield-check text-primary me-2"></i>
                                    <span>账号状态：${user.status == 1 ? '正常' : '停用'}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-8">
                        <!-- 个人资料卡片 -->
                        <div class="card profile-card">
                            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">个人资料</h5>
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editProfileModal">
                                    <i class="bi bi-pencil-square"></i> 编辑资料
                                </button>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">用户名</label>
                                    <div class="col-sm-9">
                                        <p class="form-control-plaintext">${user.username}</p>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">邮箱</label>
                                    <div class="col-sm-9">
                                        <p class="form-control-plaintext">${user.email != null ? user.email : '未设置'}</p>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-sm-3 col-form-label">电话</label>
                                    <div class="col-sm-9">
                                        <p class="form-control-plaintext">${user.phone != null ? user.phone : '未设置'}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 编辑个人资料模态框 -->
<div class="modal fade" id="editProfileModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑个人资料</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="profileForm">
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="username" value="${user.username}" readonly>
                        <small class="text-muted">用户名不可修改</small>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="password" placeholder="输入新密码">
                        <small class="text-danger">留空表示不修改密码</small>
                    </div>
                    <div class="mb-3">
                        <label for="confirmPassword" class="form-label">确认密码</label>
                        <input type="password" class="form-control" id="confirmPassword" placeholder="再次输入新密码">
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="email" value="${user.email}">
                    </div>
                    <div class="mb-3">
                        <label for="phone" class="form-label">电话</label>
                        <input type="text" class="form-control" id="phone" value="${user.phone}">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveProfileBtn">保存更改</button>
            </div>
        </div>
    </div>
</div>

<!-- 结果提示模态框 -->
<div class="modal fade" id="resultModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resultModalTitle">操作结果</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body" id="resultModalBody">
                <!-- 结果信息将在这里显示 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS 和依赖 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

<script>
    // 定义上下文路径变量，供JS文件使用
    var contextPath = '${pageContext.request.contextPath}';
</script>
<!-- 引入外部JS文件 -->
<script src="${pageContext.request.contextPath}/MainPage/managePage/personalCenter.js"></script>
</body>
</html>
